
import Vue from "vue"

// 特别注意该自定义指令使用的时候必须全部给el-table-column设置width属性，否则将会无限拉伸
function scroll(header,body){
    setTimeout(()=>{
        let innerBody = body.querySelector(".el-table__body")
        if(parseFloat(body.style.maxHeight)<header.clientHeight+innerBody.clientHeight){
            body.style.overflowY = 'scroll'
        }else{
            body.style.overflowY = 'hidden'
        }


    })
}

Vue.directive("maxheight",{
    inserted(el,binding){
       
        el.style.overflow="auto"
        let body = el.querySelector(".el-table__body-wrapper")
        let header = el.querySelector(".el-table__header-wrapper")
        if(binding.value&&parseInt(binding.value)){
            body.style.maxHeight= binding.value+'px'
        }else{
            body.style.maxHeight = window.innerHeight-130+'px'
        }
        scroll(header,body)
    },
    update(el,binding){
        el.style.overflow="auto"
        let body = el.querySelector(".el-table__body-wrapper")
        let header = el.querySelector(".el-table__header-wrapper")
        if(binding.value&&parseInt(binding.value)){
            body.style.maxHeight= binding.value+'px'
        }else{
            body.style.maxHeight = window.innerHeight-130+'px'
        }
        
        scroll(header,body)
    },
})

export {}
